Vue Router
https://gyazo.com/2778d4aa16bc2de6c5030d0a49b64659
機能
ネストされたルート/ビューマッピング
モジュール式、コンポーネントベースのルータ構造
ルートパラメータ、クエリ、ワイルドカード
細かいナビゲーションコントロール
自動で付与される active CSS クラス
HTML5 history モードまたは hash モードと IE9 の互換性
カスタマイズ可能なスクロール動作
モード
history ヒストリー
対策:単純な catch-all フォールバックのためのルートをサーバー側で追加
{ path: '*', component: NotFoundComponent }
hash ハッシュ
プロパティ
Props
遷移時にデータ渡したい際に使う
storeから消えてしまう恐れのあるモノの取得用id
ネスト
children
Guard ガード
code:rouer.js
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
権限によるアクセス分岐したい
Vuexで保存されているUserアイテムの権限で分岐する必要あり router-link
名前付きルート
⭕️to={name:'hoge'}
❌to="/hoge"
変更箇所が少なくて済む
router-view
リダイレクト
メタフィールド
code:router/index.js
routes: [
{
path: 'bar',
component: Bar,
// メタフィールド 認証
meta: { requiresAuth: true }
}
]})
router.beforeEach((to, from, next) => {
// 上位ルートを含めて認証が必要なルートがあるか確認
if (to.matched.some(page => page.meta.requiresAuth)) {
// 認証状態を確認
if(!auth.loggedIn()){
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
} else {
next()
}
})
トランジション
データ取得
遷移前の取得
遷移後の取得
注意: この機能は ブラウザが history.pushState をサポートしている場合のみ動作します
用途
lazy-load
TODO
ベストプラクティスを知りたい
動的ルート
困りごと
vue-router pushがundefined
scriptでrouterを使うときは、importする
code:view.js
import router from "@/router/index";
router.push({ name: "home" });